<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 图表区域 -->
    <el-card style="margin-top:10px">
      <div class="chartBox">
        <div class="pieChartBox">
          <div id="pie">
            <pie-chart :id="pie" :data="pieChartData"></pie-chart>
          </div>
        </div>
        <div class="lineChartBox">
          <div id="line">
            <line-chart
              :id="line"
              :title="lineTitle"
              :data="lineChartData"
            ></line-chart>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import pieChart from '../chart/PieChart'
import lineChart from '../chart/LineChart'
export default {
  components: {
    pieChart,
    lineChart
  },
  data() {
    return {
      pie: 'pie',
      pieChartData: {
        title: '购买统计',
        datas: [],
        legend: []
      },
      line: 'line',
      lineTitle: '月销售量统计图',
      lineChartData: {
        name: '111',
        // y轴数据
        datas: [],
        // x轴数据
        time: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      // 获取分类数据
      const { data: resCate } = await this.$http.get('/category/getCategory')
      if (resCate.status !== 200) return this.$message.error('获取分类失败')
      const cateArr = []
      resCate.data.forEach(item => {
        cateArr.push(item.category_name)
      })
      this.pieChartData.legend = cateArr
      console.log(this.pieChartData.legend)
      // 获取饼图数据
      const { data: res } = await this.$http.get('/statistics/getData')
      if (res.code !== 200) return this.$message.error('获取统计表数据失败')
      console.log(res)
      const pieDatasArr = []
      cateArr.forEach(cateItem => {
        let value = 0
        res.data.forEach(item => {
          if (item.statistics_category_name === cateItem) {
            value += item.statistics_buy_num
          }
        })
        pieDatasArr.push({
          value: value,
          name: cateItem
        })
      })
      this.pieChartData.datas = pieDatasArr
      console.log(pieDatasArr)
      // 获取折线图数据
      this.lineChartData.time.forEach(timeItem => {
        let num = 0
        res.data.forEach(item => {
          if (item.statistics_buy_month === timeItem) {
            num += item.statistics_buy_num
          }
        })
        this.lineChartData.datas.push(num)
      })
      console.log(this.lineChartData.datas)
    }
  }
}
</script>

<style lang="less" scoped>
.chartBox {
  display: flex;
}
#pie {
  width: 600px;
  height: 500px;
}
#line {
  width: 800px;
  height: 500px;
}
</style>
